import { postShoppingCartList } from '@/services/demo/UserController';
import { useLoginState } from '@/store/login';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Dropdown, Select } from 'antd';
import { useRef } from 'react';

const columns: ProColumns<any>[] = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    valueType: 'indexBorder',
    fixed: 'left',
    width: 48,
  },
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    width: 120,
    copyable: true,
    ellipsis: true,
  },
  {
    title: '描述',
    dataIndex: 'des',
    key: 'des',
    width: 240,
    ellipsis: true,
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    width: 120,
    ellipsis: true,
    renderFormItem: () => {
      return (
        <Select
          allowClear
          options={[
            { value: 19.99, label: '19.99' },
            { value: 9.99, label: '9.99' },
          ]}
        />
      );
    },
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    width: 100,
    fixed: 'right',
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.id);
        }}
      >
        编辑
      </a>,
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
    ],
  },
];

const Table = () => {
  const loginState = useLoginState();

  const actionRef = useRef<ActionType>();
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) => {
        const { current, pageSize, price, ...other } = params;
        const res = await postShoppingCartList({
          id: loginState.formData.shoppingCartId,
          page: current,
          pageSize: pageSize,
          price: price,
          ...other,
        });

        return {
          data: res.data,
          current: res.current,
          pageSize: res.pageSize,
          total: res.total,
        };
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        defaultValue: {
          option: { fixed: 'right', disable: true },
        },
        onChange(value) {
          console.log('value: ', value);
        },
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
        collapsed: false,
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      // form={{
      //   // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
      //   syncToUrl: (values, type) => {
      //     if (type === 'get') {
      //       return {
      //         ...values,
      //         created_at: [values.startTime, values.endTime],
      //       };
      //     }
      //     return values;
      //   },
      // }}
      pagination={{
        showQuickJumper: false,
        showSizeChanger: false,
        showTotal: () => {
          return null;
        },
        simple: true,
        pageSize: 10,
      }}
      headerTitle="高级表格"
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          onClick={() => {
            actionRef.current?.reload();
          }}
          type="primary"
        >
          新建
        </Button>,
        <Dropdown
          key="menu"
          menu={{
            items: [
              {
                label: '1st item',
                key: '1',
              },
              {
                label: '2nd item',
                key: '1',
              },
              {
                label: '3rd item',
                key: '1',
              },
            ],
          }}
        >
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
    />
  );
};

export default Table;
